<template>
    <div class="page-container">
        <header>
            <i v-if="showHome" class="home" @click="$router.push('/home')">&#xe71a;</i>
            <i v-if="showBack" class="back" @click="$router.go(-1)">&#xe6cc;</i>
            <span>{{title}}</span>
            <!-- 触发newEvt事件--自定义事件 -->
            <i v-if="showNew" class="new" @click="$emit('newEvt')">&#xe889;</i>
        </header>
        <article>
            <slot/>
        </article>
    </div>
</template>

<script>
    export default {
        props: {
            /**
             * 布局组件的标题
             */
            title: {
                type: String,
                default: '诺来智能采购'
            },
            showHome: {
                type: Boolean,
                default: true
            },
            showBack: {
                type: Boolean,
                default: false
            },
            showNew: {
                type: Boolean,
                default: false
            }
        }
    }
</script>

<style lang="less" scoped>
    @import '../style/common.less';

    .page-container {
        display: block;
        position: relative;
        height: 100%;
        > header {
            display: block;
            position: relative;
            height: 48px;
            line-height: 48px;
            font-size: .9rem;
            text-align: center;
            color: @cf;
            background-color: @c3;
            .clear();
            > i {
                float: left;
                position: relative;
                width: 48px;
                height: 48px;
                .hc-ft(1.4rem, @cf);
                text-align: center;
                line-height: 48px;
                z-index: 10;
                &.new {
                    float: right;
                }
            }
            > span {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 1;
            }
        }
        > article {
            display: block;
            height: calc(100% - 48px);
            overflow-x: hidden;
        }
    }
</style>